<template>
  <cu-custom bg-color="bg-white text-black" is-back bg-image="">
    <template #backText>返回</template>
  </cu-custom>
  <form @submit="formSubmit">
    <view class="container">
      <view class="cu-bar bg-white solid-bottom">
        <view class="action text-black text-bold">
          <text class="cuIcon-titles text-orange"></text>
          <text class="text-xl">基本信息</text>
        </view>
        <view class="action">
          <button class="cu-btn bg-gradual-blue shadow" form-type="submit">
            保存
          </button>
        </view>
      </view>
    </view>
    <view class="cu-form-group">
      <view class="title">姓名</view>
      <input v-model="form.name" type="text" placeholder="请输入姓名（必填）" />
    </view>
    <view class="cu-form-group">
      <view class="title">简历内是否显示性别</view>
      <switch class="orange radius sm" checked @change="onChange"></switch>
    </view>
    <view class="cu-form-group">
      <view class="title">性别</view>
      <picker :value="form.six" :range="['男', '女']" @change="onSixChange">
        <view class="cu-form-group">
          <text class="text-df">{{ form.six == 0 ? "男" : "女" }}</text>
          <text v-show="!form.isShowSix" class="text-df flex-sub"
            >（简历内不显示）</text
          >
        </view>
      </picker>
    </view>
    <view class="cu-form-group">
      <view class="title">手机号码</view>
      <input
        v-model="form.phone"
        placeholder="请输入手机号码（必填）"
        type="tel"
      />
    </view>
    <view class="cu-form-group">
      <view class="title">邮箱</view>
      <input v-model="form.email" placeholder="请输入邮箱" type="email" />
    </view>
    <view class="cu-bar bg-white solid-bottom">
      <view class="action">
        <text class="text-xl">更多个人信息（选填项）</text>
      </view>
    </view>
    <view class="cu-form-group">
      <view class="title">居住地</view>
      <picker mode="region" @change="onAddressChange">
        <view class="picker">{{ form.address || "请选择居住地" }}</view>
      </picker>
    </view>
    <view class="cu-form-group">
      <input v-model="form.fullAddress" placeholder="请输入详细地址" />
    </view>
    <view class="cu-form-group">
      <view class="title">QQ号</view>
      <input v-model="form.qq" placeholder="请输入QQ号" type="tel" />
    </view>
    <view class="cu-form-group">
      <view class="title">微信号</view>
      <input v-model="form.wx" placeholder="请输入微信号" />
    </view>
    <view class="cu-form-group">
      <view class="title">政治面貌</view>
      <input v-model="form.face" placeholder="请输入政治面貌" />
    </view>
    <view class="cu-form-group">
      <view class="title">婚姻状态</view>
      <radio-group>
        <label class="uni-list-cell uni-list-cell-pd">
          <radio class="blue" />
          已婚
        </label>
        <label class="uni-list-cell uni-list-cell-pd">
          <radio class="blue" />
          未婚
        </label>
      </radio-group>
    </view>
    <view class="cu-form-group">
      <view class="title">民族</view>
      <input v-model="form.familyName" placeholder="请输入民族" />
    </view>
    <view class="cu-form-group">
      <view class="title">年龄</view>
      <input v-model="form.age" placeholder="请输入年龄" type="numeric" />
    </view>
    <view class="cu-form-group"></view>
  </form>
</template>

<script setup lang="ts">
import { reactive, toRefs } from "vue";
import { onLoad } from "@dcloudio/uni-app";
let state: any = reactive({
  form: {
    six: 0,
    isShowSix: true,
    address: "",
    name: "",
    phone: "",
    fullAddress: "",
    familyName: "",
    email: "",
    img: uni.getStorageSync("imgUrl"),
  },
});
const { form } = toRefs(state);
onLoad((option: any) => {
  if (option.personal) {
    form.value = JSON.parse(decodeURIComponent(option.personal)).data;
  } else {
    let personal = uni.getStorageSync("personal");
    if (personal) {
      state.form = { ...state.form, ...personal.data };
    }
  }
});
console.log(form, "ddd");
function onSixChange(e: any) {
  form.value.six = e.detail.value;
}
function onAddressChange(e: any) {
  form.value.address = e.detail.value.join("，");
}
// 简历内是否显示性别
function onChange(e: any) {
  form.value.isShowSix = e.detail.value;
}
function formSubmit() {
  if (form.value.name.trim() == "") {
    uni.showToast({
      title: "请填写姓名",
      icon: "none",
    });
    return;
  }
  if (form.value.phone.trim() == "") {
    uni.showToast({
      title: "请填写手机号码",
      icon: "none",
    });
    return;
  }
  if (form.value.email.trim() == "") {
    uni.showToast({
      title: "请填写手机号码",
      icon: "none",
    });
    return;
  }
  uni.setStorage({
    key: "personal",
    data: {
      data: form.value,
      type: -1,
    },
  });
  uni.switchTab({ url: "/pages/index/index?id=123" });
  console.log("form", form);
}
</script>

<style scoped>
.container {
  min-height: 100rpx;
}
.container .cu-bar {
  position: fixed;
  width: 100%;
  min-height: 60rpx;
  z-index: 100;
}
</style>
